<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-card>
				<template #header>
					<div>
						<span class="text-primary">系统LOGO图片</span>
					</div>
				</template>
				<div class="flex flex-col items-center justify-center">
					<ImageUpload v-model:imageUrl="logoSrc">
						<template #empty>
							<el-icon><PictureFilled /></el-icon>
							<span>请上传LOGO图片</span>
						</template>
					</ImageUpload>
					<div class="pt-6">
						<el-button @click="handleDelete" type="danger" :disabled="!logoSrc">删除</el-button>
						<el-button @click="handleLogo" type="primary" :disabled="!logoSrc">更新</el-button>
					</div>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script setup name="settingLogo" lang="ts">
import { getObj, addObj } from '/@/api/platform/basicCustomLogo';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useUserInfo } from '/@/stores/userInfo';
const ImageUpload = defineAsyncComponent(() => import('/@/components/Upload/Image.vue'));
const logoSrc = ref();
const handleLogo = () => {
	addObj({ logo: logoSrc.value }).then((res) => {
		if (res.data) {
			useMessage().success('修改成功');
			useUserInfo().setUserLogo();
		} else {
			useMessage().error('修改失败');
			getLogo();
		}
	});
};
function getLogo() {
	getObj().then((res) => {
		logoSrc.value = res.data?.logo;
	});
}
const handleDelete = async () => {
	try {
		await useMessageBox().confirm('删除后将采用系统默认logo，确认要删除吗？');
	} catch {
		return;
	}
	try {
		logoSrc.value = '';
		await addObj({ logo: '' });
		useMessage().success('删除成功');
	} catch (err: any) {
		useMessage().error(err.msg);
	}
};
getLogo();
</script>

<style lang="scss" scoped></style>
